<template>
  <div class="itemss">
    <div class="items">
      <div class="top">
        <div class="top_left">{{ goodlist.shop_name }}</div>
        <div class="top_rigth" ref="GoodsStatusRef">{{ this.goodsStatus }}</div>
      </div>
      <div class="center">
        <div class="center_left">
          <van-image
            class="goodsPhoto"
            width="100"
            height="100"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          />
        </div>
        <div class="center_center">我是这个订单的描述信息</div>
        <div class="center_rigth">
          ¥
          <span class="perice">{{ goodlist.price }}</span>
        </div>
      </div>
      <div class="bottom">
        <van-button
          round
          size="small"
          plain
          class="clickLook"
          @click="GoodsDetailsPopup = true"
        >{{ this.goodlist.status === 0 ? '去付款' : '查看订单' }}</van-button>
      </div>
      <!-- 按钮 -->
      <!-- <van-button round size="small" class="clickLook" @click="GoodsDetailsPopup = true">{{ this.goodlist.status === 0 ? '去付款' : '查看订单' }}</van-button> -->
      <!-- 弹出层组件 -->
      <van-popup
        position="bottom"
        :style="{ width: '100%', height: '100%' }"
        v-model="GoodsDetailsPopup"
      >
        <goods-details
          v-if="GoodsDetailsPopup"
          :DetailsItem="goodlist"
          @close="GoodsDetailsPopup = false"
          @to_refund="refund($event)"
          @confirm_order="$emit('confirmorder')"
          @to_confirm_refund="confirmRefund($event)"
          @to_confirm_delivery="confirmDelivery($event)"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import goodsDetails from '../../particulars/index'
export default {
  /*   provide: function () {
      return {
        goodslist: this.goodlist
      }
    }, */
  props: {
    goodlist: {
      type: Object,
      required: true
    }
  },
  components: {
    goodsDetails
  },
  data () {
    return {
      goodsStatus: '', // 状态的文本
      GoodsDetailsPopup: false
    }
  },
  created () {
  },
  updated () {
    this.getStatusText()
  },
  mounted () {
    this.getStatusText()
  },
  methods: {
    getStatusText () {
      switch (this.goodlist.status) {
        case 1:
          this.goodsStatus = '待派送'
          this.$refs.GoodsStatusRef.className = 'bule top_rigth'
          break
        case 2:
          this.goodsStatus = '待自提'
          this.$refs.GoodsStatusRef.className = 'bule top_rigth'
          break
        case 3:
          this.goodsStatus = '已收货'
          this.$refs.GoodsStatusRef.className = 'yellowgreen top_rigth'
          break
        case 4:
          this.goodsStatus = '售后退款'
          this.$refs.GoodsStatusRef.className = 'red top_rigth'
          break
        case 5:
          this.goodsStatus = '已退款'
          this.$refs.GoodsStatusRef.className = 'yellowgreen top_rigth'
          break
        default:
          this.goodsStatus = '待支付'
      }
    },
    getgoodlist () {
      return this.goodlist
    },
    refund (val) {
      this.$emit('to_refund', val)
    },
    confirmRefund (val) {
      this.$emit('to_confirmrefund', val)
    },
    confirmDelivery (val) {
      this.$emit('to_confirmdelivery', val)
    }
  }
}
</script>

<style scoped lang="less">
.items {
  background-color: #fff;
  padding: 25px;
  box-sizing: border-box;
  width: 100%;
  .top {
    line-height: 50px;
    overflow: hidden;
    margin-bottom: 15px;
    .top_left {
      font-size: 35px;
      float: left;
      font-weight: 700;
    }
    .top_rigth {
      font-size: 25px;
      float: right;
    }
  }
  .center {
    overflow: hidden;
    .center_left {
      float: left;
      width: 150px;
      height: 150px;
    }
    .center_center {
      width: 250px;
      height: 200px;
      font-size: 30px;
      margin-left: 75px;
      float: left;
    }
    .center_rigth {
      margin-left: 500px;
      font-size: 25px;
      .perice {
        font-size: 35px;
      }
    }
  }
  .bottom {
    margin-top: 15px;
    .clickLook {
      border: 1px solid rgb(247, 104, 8);
      color: rgb(247, 104, 8);
      float: right;
      margin-left: 280px;
    }
  }
}
.itemss {
  margin-top: 15px;
  border-top: 10px solid rgb(247, 104, 8);
  border-radius: 5%;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.35);
  margin-bottom: 35px;
}
.red {
  color: red;
}
.bule {
  color: blue;
}
.yellowgreen {
  color: yellowgreen;
}
.cyan {
  color: cyan;
}
</style>
